import { UIProps } from "../interface/ui";
import React from 'react';
import { connect } from "react-redux";
import { RootProps } from "../interface/state";
import { getComponentPropProxy } from "../factory/componentPropsProxy";
import { ElementClass } from "breeze-leaf-core-lib";

export const createElementWrapper = (
  name: string,
  ConnectedComponent: React.ComponentType<UIProps>
) => {
  return connect(state => ({ state }))(class extends React.Component<RootProps & ElementClass> {
    displayName = `BreezeLeaf-ui-wrapper-${name}`;
    constructor(props: any) {
      super(props)
    }

    render() {
      const { dispatch, children, meta, state, ...props } = this.props;
      // const finalProps = new Proxy({ ...props, ...proxyProps }, {
      //   get(obj, key) {
      //     switch (key) {
      //       case "onChange":
      //         obj[key] = (value: any) => {
      //           dispatch({
      //             type: ServiceActionType.StoreMutation,
      //             who: {
      //               name: meta.field || meta.uuid,
      //               uuid: meta.uuid
      //             },
      //             which: {
      //               field: `$root.${meta.field}`
      //             },
      //             payload: value.target.value
      //           })
      //         }
      //         break;

      //       case "onClick":
      //         obj[key] = () => {
      //           console.log('state is :', state);
      //         }
      //         break;

      //       default:
      //         break;
      //     }
      //     return obj[key];
      //   }
      // });
      const finalProps = {...props, ...getComponentPropProxy(name, meta)}


      if (children) {
        return (
          <ConnectedComponent {...finalProps}>
            {children}
          </ConnectedComponent>
        )
      }
      return <ConnectedComponent {...finalProps} />;
    }
  })
}